<template>
  <div>
    <el-card class="box-card">
      <el-row>
       <el-col :span="12">
         <!-- 输入框 -->
         <div class="grid-content bg-purple">
            <el-form ref="form" :model="queryinfo" label-width="80px">
               <el-form-item label="关键字">
                 <el-input v-model="queryinfo.keyword" ></el-input>
               </el-form-item>
            </el-form>
         </div>
       </el-col>
        <!-- 按钮 -->
      <div class="button">
         <el-form :model="form" label-width="80px">
             <el-form-item class="anniu">
                <el-button @click="qingchu">清除</el-button>
                <el-button type="primary" @click="liebiao">搜索</el-button>
           </el-form-item>
        </el-form>

      </div>
  </el-row>
  <!-- 警示标题 -->
          <el-alert
            title=''
            type="info"
             v-bind:closable="false"
             v-model="queryinfo"
            show-icon>
        </el-alert>
<!-- 任务栏 -->
    <el-table
      :data="tableData"
     
      style="width: 100%">
      <el-table-column  prop="id" label="编号" width="180" >
       
      
      </el-table-column>

      <el-table-column prop="questionType" label="题型" width="100" >
     

      </el-table-column>

      <el-table-column prop="questionIDs" label="题目编号" width="200">
        <template slot-scope="scope" >
             <a href="javascript:;" v-for="(item,index) in scope.row.questionIDs" :key="index" @click="getScope(item)">{{item.number}}<br></a>
        
        </template>
      </el-table-column>

       <el-table-column prop="addTime" label="录入时间" >
     
     
      </el-table-column>

       <el-table-column prop="totalSeconds" label="答题时间(s)" >
    
      
      </el-table-column>

       <el-table-column  prop="accuracyRate" label="正确率(%)" >
       
     
      </el-table-column>

       <el-table-column  prop="userName" label="录入人" >
       
     
      </el-table-column>

       <el-table-column prop="address" label="操作" >
          <!-- 删除按钮 -->
         <template slot-scope="scope">
             <el-button type="danger" @click="removeById(scope.row)" icon="el-icon-delete" circle></el-button>
         </template>
        <!-- <el-button type="danger" ></el-button> -->
      </el-table-column>
    </el-table>
      <!-- 页码 -->
    <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryinfo.page"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="queryinfo.pagesize"
          layout="sizes, prev, pager, next, jumper"
          :total="total">
    </el-pagination>
    </el-card>

  <!-- 对话框 -->
  <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="50%"
  :before-close="handleClose">
  <randoms-preview :scopeObj='scopeObj'></randoms-preview>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
import {randoms} from '@/api/hmmm/questions'
import {removeRandoms,detail} from '@/api/hmmm/questions'
import randomsPreview from './randoms.vue'


export default {
  components: { randomsPreview },

    data() {
      return {
        form: {
          name: '',
        },
      //  弹出框
       dialogVisible: false,
      //  单选
            radio: 3,
        // 列表
         tableData: [],
        queryinfo:{
             page:1,
             pagesize:10,
             keyword:'',
         },
         total: 0,
         scopeObj:{}
      }
},
  created () {
    this.liebiao()
  },
    methods:{
      // 点击清除
   qingchu(){
        this.queryinfo.keyword = '',
        this.liebiao()
      },
      // 基础数据渲染
      async liebiao(){
       try {
         const{data} = await randoms(this.queryinfo)
         console.log(data);
         this.tableData = data.items
         this.total = data.counts
         this.tableData.forEach(item => {
           if(item.questionType === '1'){
             item.questionType = '单选'
           }else if(item.questionType ==='2'){
             item.questionType='多选'
           }else if(item.questionType ==='3'){
             item.questionType='简单'
           }
         });
         console.log(this.tableData);
       } catch (error) {
         this.$message.error('获取失败请稍后重试')
       }
    },
    // 删除
    async removeById(id) {
      console.log(id);
      const confirmResult = await this.$confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }

      const res  = await removeRandoms({id:id.id})
      console.log(res);
      this.$message.success('删除成功！')
      this.liebiao()
    },
    // 弹出框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      // 点击编号
      async getScope(scope){
        this.dialogVisible=true
        const {data} =  await detail(scope)
        console.log(data);
        let optionsIsRight = [];
 
        for (let i = 0; i < data.options.length; i++) {
          if(data.options[i].isRight){
              if(data.questionType == '1' ){
                optionsIsRight= data.options[i].id;
              }
            if(data.questionType == '2' ){
              optionsIsRight.push(data.options[i].id)
            }
          }
        }
          data.optionsIsRight = optionsIsRight;
          this.scopeObj=data
        
      },
      handleCurrentChange(val){
        this.queryinfo.page=val
        this.liebiao()
      },
      handleSizeChange(val){
        this.queryinfo.pagesize=val
        this.liebiao()
      }
    }
}
</script>

<style scoped lang='less'>
  .el-col {
    width: 288px;
  }
  .button{
    float: right;
  }
 .el-alert{
   margin-bottom: 20px;
 }
  a{
    color:blue;
  }
  
 
 </style>
